<template>
  <div class="dashboard-container" v-loading="loading" element-loading-text="加载数据中..."
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 头部标题 -->
    <div class="dashboard-header">
      <!-- 背景装饰 -->
      <div class="header-decoration">
        <div class="floating-hearts">
          <div class="heart" v-for="i in 8" :key="i"></div>
        </div>
        <div class="gradient-orbs">
          <div class="orb orb-1"></div>
          <div class="orb orb-2"></div>
        </div>
      </div>

      <div class="header-content">
        <div class="title-section">

          <h1 class="main-title">💕 缘分相遇 · 爱情管理中心</h1>
          <p class="subtitle">专业的相亲交友平台 · 让每一份真心都能找到归宿</p>
          <div class="stats-preview">
            <div class="stat-item">
              <span class="number">520万+</span>
              <span class="label">注册用户</span>
            </div>
            <div class="stat-item">
              <span class="number">13.14万</span>
              <span class="label">成功配对</span>
            </div>
            <div class="stat-item">
              <span class="number">98.5%</span>
              <span class="label">满意度</span>
            </div>
          </div>
        </div>
        <div class="time-section">
          <div class="time-card">
            <div class="current-time">{{ currentTime }}</div>
            <div class="current-date">{{ currentDate }}</div>
            <div class="weather-info">
              <i class="el-icon-sunny"></i>
              <span>今日适合约会 ☀️</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="metrics-section">
      <el-row :gutter="20">
        <el-col :span="4" v-for="(metric, index) in coreMetrics" :key="index">
          <div class="metric-card" :class="`metric-${index + 1}`">
            <div class="metric-icon">
              <i :class="metric.icon"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ metric.value }}</div>
              <div class="metric-label">{{ metric.label }}</div>
              <div class="metric-change" :class="metric.changeType">
                <i :class="metric.changeIcon"></i>
                {{ metric.change }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <!-- 左侧图表区域 -->
        <el-col :span="16">
          <div class="chart-container">
            <div class="chart-header">
              <h3>业务趋势分析</h3>
              <div class="chart-tabs">
                <span
                    v-for="tab in trendTabs"
                    :key="tab.key"
                    :class="['tab-item', { active: activeTrendTab === tab.key }]"
                    @click="activeTrendTab = tab.key"
                >
                  {{ tab.label }}
                </span>
              </div>
            </div>
            <div class="chart-content">
              <div ref="trendChart" class="chart" style="height: 350px;"></div>
            </div>
          </div>
        </el-col>

        <!-- 右侧统计区域 -->
        <el-col :span="8">
          <div class="stats-container">
            <!-- 用户性别分布 -->
            <div class="stat-item">
              <div class="stat-header">
                <h4>用户性别分布</h4>
              </div>
              <div ref="userGenderChart" class="chart" style="height: 180px;"></div>
            </div>

            <!-- 用户年龄分布 -->
            <div class="stat-item">
              <div class="stat-header">
                <h4>用户年龄分布</h4>
              </div>
              <div ref="userAgeChart" class="chart" style="height: 150px;"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 底部数据展示区域 -->
    <div class="bottom-section">
      <el-row :gutter="20">
        <!-- 地区分布地图 -->
        <el-col :span="8">
          <div class="data-panel">
            <div class="panel-header">
              <h4>地区分布</h4>
            </div>
            <div class="panel-content">
              <div ref="regionChart" class="chart" style="height: 280px;"></div>
            </div>
          </div>
        </el-col>

        <!-- 热门游戏排行 -->
        <el-col :span="8">
          <div class="data-panel">
            <div class="panel-header">
              <h4>热门游戏排行榜</h4>
            </div>
            <div class="panel-content">
              <div class="ranking-list">
                <div
                    v-for="(item, index) in topGames"
                    :key="index"
                    class="ranking-item"
                    :class="`rank-${index + 1}`"
                >
                  <div class="rank-number">{{ index + 1 }}</div>
                  <div class="game-info">
                    <div class="name">{{ item.name }}</div>
                    <div class="stats">
                      <span class="play-times">{{ item.playTimes }}次</span>
                      <span class="popularity">{{ item.popularity }}</span>
                    </div>
                  </div>
                  <div class="rank-badge" v-if="index < 3">
                    <i :class="getRankIcon(index)"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 实时活动 -->
        <el-col :span="8">
          <div class="data-panel">
            <div class="panel-header">
              <h4>实时活动</h4>
              <div class="refresh-btn" @click="refreshActivities">
                <i class="el-icon-refresh"></i>
              </div>
            </div>
            <div class="panel-content">
              <div class="activity-list">
                <div
                    v-for="(activity, index) in recentActivities"
                    :key="index"
                    class="activity-item"
                    :class="`activity-type-${activity.type}`"
                >
                  <div class="activity-icon">
                    <i :class="getActivityIcon(activity.type)"></i>
                  </div>
                  <div class="activity-content">
                    <div class="activity-text">{{ activity.content }}</div>
                    <div class="activity-time">{{ activity.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 数据滚动展示 -->
    <div class="scroll-data">
      <div class="scroll-content">
        <span v-for="(item, index) in scrollData" :key="index" class="scroll-item">
          {{ item }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup name="Dashboard">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { getDashboardStatistics } from '@/api/dashboard/statistics'

// 响应式数据
const currentTime = ref('')
const currentDate = ref('')
const activeTrendTab = ref('users')
const loading = ref(false)

// 核心指标数据
const coreMetrics = ref([
  {
    label: '💕 真爱用户',
    value: '520万',
    icon: 'el-icon-user',
    change: '+15.8%',
    changeType: 'increase',
    changeIcon: 'el-icon-arrow-up',
    color: '#ff6b9d'
  },
  {
    label: '💖 活跃恋人',
    value: '131.4万',
    icon: 'el-icon-star-on',
    change: '+12.3%',
    changeType: 'increase',
    changeIcon: 'el-icon-arrow-up',
    color: '#c44569'
  },
  {
    label: '💑 成功配对',
    value: '13.14万',
    icon: 'el-icon-heart',
    change: '+18.5%',
    changeType: 'increase',
    changeIcon: 'el-icon-arrow-up',
    color: '#f8b500'
  },
  {
    label: '🎮 互动游戏',
    value: '1314万',
    icon: 'el-icon-trophy',
    change: '+25.6%',
    changeType: 'increase',
    changeIcon: 'el-icon-arrow-up',
    color: '#6c5ce7'
  },
  {
    label: '💬 甜蜜对话',
    value: '5200万',
    icon: 'el-icon-chat-dot-round',
    change: '+32.1%',
    changeType: 'increase',
    changeIcon: 'el-icon-arrow-up',
    color: '#00b894'
  },
  {
    label: '💰 爱情收益',
    value: '¥520万',
    icon: 'el-icon-coin',
    change: '+28.7%',
    changeType: 'increase',
    changeIcon: 'el-icon-arrow-up',
    color: '#fdcb6e'
  }
])

// 趋势图标签
const trendTabs = ref([
  { key: 'users', label: '用户增长' },
  { key: 'matches', label: '匹配成功' },
  { key: 'games', label: '游戏互动' }
])

// 热门游戏排行
const topGames = ref([])

// 实时活动
const recentActivities = ref([])

// 滚动数据
const scrollData = ref([])

// 统计数据
const dashboardData = ref({})

// 图表引用
const trendChart = ref(null)
const userGenderChart = ref(null)
const userAgeChart = ref(null)
const regionChart = ref(null)

// 图表实例
let trendChartInstance = null
let userGenderChartInstance = null
let userAgeChartInstance = null
let regionChartInstance = null

// 定时器
let timeInterval = null

// 方法
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

const getRankIcon = (index) => {
  const icons = ['el-icon-trophy-1', 'el-icon-medal', 'el-icon-medal-1']
  return icons[index] || 'el-icon-star-off'
}

const getActivityIcon = (type) => {
  const icons = {
    1: 'el-icon-user-solid',
    2: 'el-icon-date',
    3: 'el-icon-circle-check'
  }
  return icons[type] || 'el-icon-info'
}

const refreshActivities = () => {
  loadDashboardData()
}

// 格式化数字显示
const formatNumber = (num) => {
  if (num >= 100000000) {
    return (num / 100000000).toFixed(1) + '亿'
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

// 加载仪表板数据
const loadDashboardData = async () => {
  try {
    loading.value = true
    const response = await getDashboardStatistics()

    if (response.code === 200) {
      dashboardData.value = response.data
      updateCoreMetrics()
      updateTopGames()
      updateRecentActivities()
      updateScrollData()
      updateCharts()
    }
  } catch (error) {
    console.error('加载仪表板数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 更新核心指标
const updateCoreMetrics = () => {
  const { coreStats } = dashboardData.value
  if (coreStats) {
    coreMetrics.value[0].value = formatNumber(coreStats.totalUsers)
    coreMetrics.value[1].value = formatNumber(coreStats.activeUsers)
    coreMetrics.value[2].value = formatNumber(coreStats.successfulMatches)
    coreMetrics.value[3].value = formatNumber(coreStats.gameInteractions)
    coreMetrics.value[4].value = formatNumber(coreStats.chatMessages)
    coreMetrics.value[5].value = '¥' + formatNumber(coreStats.platformRevenue)
  }
}

// 更新热门游戏
const updateTopGames = () => {
  const { popularGames } = dashboardData.value
  if (popularGames && popularGames.length > 0) {
    topGames.value = popularGames.map(game => ({
      name: game.name,
      playTimes: formatNumber(game.playTimes) + '次',
      popularity: game.popularityRate.toFixed(1) + '%'
    }))
  }
}

// 更新实时活动
const updateRecentActivities = () => {
  const { realtimeActivities } = dashboardData.value
  if (realtimeActivities && realtimeActivities.length > 0) {
    recentActivities.value = realtimeActivities.map(activity => ({
      content: activity.content,
      time: activity.time,
      type: activity.typeCode
    }))
  }
}

// 更新滚动数据
const updateScrollData = () => {
  const { realtimeStats } = dashboardData.value
  if (realtimeStats) {
    scrollData.value = [
      `🎮 今日游戏互动次数突破${formatNumber(realtimeStats.todayGamePlays)}次！`,
      `💕 恭喜${formatNumber(realtimeStats.todayMatches)}对用户成功匹配！`,
      `👥 平台新增用户${formatNumber(realtimeStats.todayNewUsers)}人`,
      `🌟 用户满意度高达98.5%`,
      `💰 今日平台收入创新高`,
      `🏆 心动问答成为最受欢迎游戏`,
      `📱 ${formatNumber(realtimeStats.onlineUsers)}用户同时在线`,
      `🎯 匹配成功率达到82%`
    ]
  }
}

// 更新图表数据
const updateCharts = () => {
  setTimeout(() => {
    initTrendChart()
    initUserGenderChart()
    initUserAgeChart()
    initRegionChart()
  }, 100)
}

// 初始化趋势图表
const initTrendChart = () => {
  if (!trendChart.value) return

  trendChartInstance = echarts.init(trendChart.value)

  // 使用真实数据或默认数据
  const { matchSuccessTrend } = dashboardData.value
  let months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
  let userGrowthData = [180000, 220000, 280000, 320000, 380000, 420000, 480000, 520000]
  let matchData = [28000, 32000, 35000, 38000, 42000, 45000, 48000, 52000]
  let gameData = [850000, 980000, 1120000, 1280000, 1450000, 1620000, 1800000, 1980000]

  if (matchSuccessTrend && matchSuccessTrend.length > 0) {
    months = matchSuccessTrend.map(item => item.month)
    matchData = matchSuccessTrend.map(item => item.successfulMatches)
    // 根据匹配数据推算用户增长和游戏数据
    userGrowthData = matchData.map(val => val * 10)
    gameData = matchData.map(val => val * 38)
  }

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#409EFF',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['用户增长', '匹配成功', '游戏互动'],
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLine: { lineStyle: { color: '#409EFF' } },
      axisLabel: { 
        color: '#dc143c',
        fontSize: 11,
        fontWeight: 'bold'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#409EFF' } },
      axisLabel: { 
        color: '#dc143c',
        fontSize: 11,
        fontWeight: 'bold',
        formatter: function(value) {
          if (value >= 1000000) {
            return (value / 1000000).toFixed(1) + 'M'
          } else if (value >= 1000) {
            return (value / 1000).toFixed(0) + 'k'
          }
          return value
        }
      },
      splitLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.2)' } }
    },
    series: [
      {
        name: '用户增长',
        type: 'line',
        smooth: true,
        data: userGrowthData,
        lineStyle: { color: '#409EFF' },
        areaStyle: { color: 'rgba(64, 158, 255, 0.2)' },
        label: {
          show: true,
          position: 'top',
          color: '#409EFF',
          fontSize: 10,
          fontWeight: 'bold',
          formatter: function(params) {
            return (params.value / 1000).toFixed(0) + 'k'
          }
        }
      },
      {
        name: '匹配成功',
        type: 'line',
        smooth: true,
        data: matchData,
        lineStyle: { color: '#67C23A' },
        areaStyle: { color: 'rgba(103, 194, 58, 0.2)' },
        label: {
          show: true,
          position: 'top',
          color: '#67C23A',
          fontSize: 10,
          fontWeight: 'bold',
          formatter: function(params) {
            return (params.value / 1000).toFixed(0) + 'k'
          }
        }
      },
      {
        name: '游戏互动',
        type: 'line',
        smooth: true,
        data: gameData,
        lineStyle: { color: '#E6A23C' },
        areaStyle: { color: 'rgba(230, 162, 60, 0.2)' },
        label: {
          show: true,
          position: 'top',
          color: '#E6A23C',
          fontSize: 10,
          fontWeight: 'bold',
          formatter: function(params) {
            return (params.value / 1000).toFixed(0) + 'k'
          }
        }
      }
    ]
  }

  trendChartInstance.setOption(option)
}

// 初始化用户性别分布图表
const initUserGenderChart = () => {
  if (!userGenderChart.value) return

  userGenderChartInstance = echarts.init(userGenderChart.value)

  // 使用真实数据或默认数据
  const { userDemographics } = dashboardData.value
  let genderData = [
    { value: 142, name: '男性用户', itemStyle: { color: '#409EFF' } },
    { value: 116, name: '女性用户', itemStyle: { color: '#F56C6C' } }
  ]

  if (userDemographics && userDemographics.genderDistribution && userDemographics.genderDistribution.length > 0) {
    console.log('使用真实性别分布数据:', userDemographics.genderDistribution)
    genderData = userDemographics.genderDistribution.map(item => ({
      value: item.value, // 直接使用后端返回的数值
      name: item.name,
      itemStyle: {
        color: item.name.includes('男') ? '#409EFF' : '#F56C6C'
      }
    }))
  } else {
    console.log('使用默认性别分布数据')
  }

  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#409EFF',
      formatter: function(params) {
        let unit = ''
        let value = params.value
        if (value >= 10000) {
          value = (value / 10000).toFixed(1)
          unit = '万'
        }
        return params.seriesName + '<br/>' + params.name + ': ' + value + unit + ' (' + params.percent + '%)'
      }
    },
    series: [
      {
        name: '用户性别分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: genderData,
        label: {
          color: '#dc143c',
          fontSize: 12,
          fontWeight: 'bold',
          formatter: function(params) {
            let unit = ''
            let value = params.value
            if (value >= 10000) {
              value = (value / 10000).toFixed(1)
              unit = '万'
            }
            return params.name + '\n' + value + unit + '\n' + params.percent + '%'
          }
        },
        labelLine: {
          lineStyle: { color: '#fff' }
        }
      }
    ]
  }

  userGenderChartInstance.setOption(option)
}

// 初始化用户年龄分布图表
const initUserAgeChart = () => {
  if (!userAgeChart.value) return

  userAgeChartInstance = echarts.init(userAgeChart.value)

  // 使用真实数据或默认数据
  const { userDemographics } = dashboardData.value
  let ageData = [
    { value: 58, name: '18-25岁', itemStyle: { color: '#67C23A' } },
    { value: 92, name: '26-30岁', itemStyle: { color: '#409EFF' } },
    { value: 68, name: '31-35岁', itemStyle: { color: '#E6A23C' } },
    { value: 28, name: '36-40岁', itemStyle: { color: '#F56C6C' } },
    { value: 12, name: '40岁以上', itemStyle: { color: '#909399' } }
  ]

  if (userDemographics && userDemographics.ageDistribution && userDemographics.ageDistribution.length > 0) {
    console.log('使用真实年龄分布数据:', userDemographics.ageDistribution)
    const colors = ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399']
    ageData = userDemographics.ageDistribution.map((item, index) => ({
      value: item.value, // 直接使用后端返回的数值
      name: item.name,
      itemStyle: { color: colors[index] || '#909399' }
    }))
  } else {
    console.log('使用默认年龄分布数据')
  }

  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#409EFF',
      formatter: function(params) {
        let unit = ''
        let value = params.value
        if (value >= 10000) {
          value = (value / 10000).toFixed(1)
          unit = '万'
        }
        return params.seriesName + '<br/>' + params.name + ': ' + value + unit + ' (' + params.percent + '%)'
      }
    },
    series: [
      {
        name: '用户年龄分布',
        type: 'pie',
        radius: '60%',
        center: ['50%', '50%'],
        data: ageData,
        label: {
          color: '#dc143c',
          fontSize: 11,
          fontWeight: 'bold',
          formatter: function(params) {
            let unit = ''
            let value = params.value
            if (value >= 10000) {
              value = (value / 10000).toFixed(1)
              unit = '万'
            }
            return params.name + '\n' + value + unit + '\n' + params.percent + '%'
          }
        }
      }
    ]
  }

  userAgeChartInstance.setOption(option)
}

// 初始化地区分布图表
const initRegionChart = () => {
  if (!regionChart.value) return

  regionChartInstance = echarts.init(regionChart.value)

  // 使用真实数据或默认数据
  const { regionDistribution } = dashboardData.value
  let regions = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安']
  let regionData = [28.5, 26.8, 24.5, 23.2, 19.8, 17.5, 15.6, 14.2]

  if (regionDistribution && regionDistribution.length > 0) {
    regions = regionDistribution.slice(0, 8).map(item => item.name)
    regionData = regionDistribution.slice(0, 8).map(item => (item.value / 10000).toFixed(1))
  }

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#409EFF'
    },
    xAxis: {
      type: 'category',
      data: regions,
      axisLabel: {
        color: '#dc143c',
        rotate: 45,
        fontSize: 11,
        fontWeight: 'bold'
      },
      axisLine: { lineStyle: { color: '#409EFF' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#dc143c',
        fontSize: 11,
        fontWeight: 'bold',
        formatter: '{value}万'
      },
      axisLine: { lineStyle: { color: '#409EFF' } },
      splitLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.2)' } }
    },
    series: [
      {
        name: '用户数量',
        type: 'bar',
        data: regionData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#409EFF' },
            { offset: 1, color: '#1890ff' }
          ])
        },
        barWidth: '60%',
        label: {
          show: true,
          position: 'top',
          color: '#409EFF',
          fontSize: 11,
          fontWeight: 'bold',
          formatter: function(params) {
            return params.value + '万'
          }
        }
      }
    ]
  }

  regionChartInstance.setOption(option)
}

// 生命周期钩子
onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)

  // 加载仪表板数据
  loadDashboardData()

  // 窗口大小改变时重新调整图表
  window.addEventListener('resize', () => {
    trendChartInstance?.resize()
    userGenderChartInstance?.resize()
    userAgeChartInstance?.resize()
    regionChartInstance?.resize()
  })
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }

  // 销毁图表实例
  trendChartInstance?.dispose()
  userGenderChartInstance?.dispose()
  userAgeChartInstance?.dispose()
  regionChartInstance?.dispose()

  window.removeEventListener('resize', () => {})
})
</script>

<style scoped lang="scss">
.dashboard-container {
  min-height: 100vh;
  background: #ffffff;
  color: #333;
  overflow-x: hidden;
  position: relative;

  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
      radial-gradient(circle at 20% 80%, rgba(220, 38, 127, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(220, 38, 127, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
  }

  // 头部样式
  .dashboard-header {
    position: relative;
    padding: 40px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(220, 38, 127, 0.1);
    border-radius: 20px;
    box-shadow: 
      0 8px 32px rgba(220, 38, 127, 0.1),
      inset 0 1px 0 rgba(255, 215, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-section {
        .main-title {
          font-size: 36px;
          font-weight: 700;
          margin: 0;
          background: linear-gradient(45deg, #dc143c, #ffd700, #dc143c);
          background-size: 300% 300%;
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: gradientShift 3s ease-in-out infinite;
          text-shadow: 0 0 30px rgba(220, 20, 60, 0.5);
          letter-spacing: 1px;
        }

        .subtitle {
          font-size: 18px;
          color: rgba(51, 51, 51, 0.9);
          margin: 8px 0 0 0;
          font-weight: 300;
          letter-spacing: 0.5px;
        }
      }

      .time-section {
        .time-card {
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(10px);
          padding: 20px;
          border-radius: 15px;
          text-align: center;
          border: 1px solid rgba(220, 38, 127, 0.1);

          .current-time {
            font-size: 28px;
            font-weight: 600;
            color: #dc143c;
            margin-bottom: 5px;
          }

          .current-date {
            font-size: 14px;
            color: rgba(51, 51, 51, 0.8);
            margin-bottom: 10px;
          }

          .weather-info {
            font-size: 12px;
            color: rgba(51, 51, 51, 0.7);
          }
        }
      }
    }
  }

  // 指标卡片样式
  .metrics-section {
    padding: 0 30px 30px;

    .metric-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      border-radius: 25px;
      padding: 25px;
      display: flex;
      align-items: center;
      border: 1px solid rgba(220, 38, 127, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(220, 38, 127, 0.1);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ff6b9d, #c44569, #f8b500);
        border-radius: 25px 25px 0 0;
      }

      &::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 60px rgba(255, 107, 157, 0.3);
        border-color: rgba(255, 255, 255, 0.4);

        &::after {
          opacity: 1;
        }

        .metric-icon {
          transform: scale(1.1) rotate(5deg);
        }
      }

      .metric-icon {
        font-size: 42px;
        margin-right: 20px;
        transition: all 0.3s ease;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

        i {
          display: block;
        }
      }

      .metric-content {
        flex: 1;

        .metric-value {
          font-size: 28px;
          font-weight: 700;
          color: #dc143c;
          margin-bottom: 8px;
          text-shadow: 0 2px 10px rgba(220, 20, 60, 0.2);
          letter-spacing: 1px;
        }

        .metric-label {
          font-size: 16px;
          color: rgba(51, 51, 51, 0.8);
          margin-bottom: 10px;
          font-weight: 500;
        }

        .metric-change {
          font-size: 14px;
          font-weight: 600;
          padding: 4px 12px;
          border-radius: 20px;
          display: inline-block;

          &.increase {
            color: #fff;
            background: linear-gradient(45deg, #00d4aa, #00b894);
            box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3);
          }

          &.decrease {
            color: #fff;
            background: linear-gradient(45deg, #ff7675, #e84393);
            box-shadow: 0 4px 15px rgba(255, 118, 117, 0.3);
          }

          i {
            margin-right: 5px;
          }
        }
      }
    }
  }

  // 图表区域样式
  .charts-section {
    padding: 0 30px 30px;

    .chart-container {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      border-radius: 25px;
      border: 1px solid rgba(220, 38, 127, 0.1);
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(220, 38, 127, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 45px rgba(255, 107, 157, 0.2);
      }

      .chart-header {
        padding: 25px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);

        h3 {
          margin: 0;
          color: #dc143c;
          font-size: 20px;
          font-weight: 600;
          text-shadow: 0 2px 10px rgba(220, 20, 60, 0.2);
        }

        .chart-tabs {
          display: flex;
          gap: 12px;

          .tab-item {
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            color: rgba(51, 51, 51, 0.8);
            border: 1px solid rgba(220, 38, 127, 0.3);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            font-weight: 500;
            background: rgba(255, 255, 255, 0.8);

            &:hover {
              color: #fff;
              border-color: rgba(220, 38, 127, 0.5);
              background: linear-gradient(45deg, #dc143c, #b8860b);
              transform: translateY(-2px);
            }

            &.active {
              background: linear-gradient(45deg, #dc143c, #ffd700);
              color: #fff;
              border-color: transparent;
              box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
            }
          }
        }
      }

      .chart-content {
        padding: 25px;
      }
    }

    .stats-container {
      .stat-item {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        border-radius: 25px;
        border: 1px solid rgba(220, 38, 127, 0.1);
        margin-bottom: 20px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(220, 38, 127, 0.1);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 35px rgba(255, 107, 157, 0.2);
        }

        .stat-header {
          padding: 20px 25px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          background: rgba(255, 255, 255, 0.05);

          h4 {
            margin: 0;
            color: #dc143c;
            font-size: 18px;
            font-weight: 600;
            text-shadow: 0 2px 10px rgba(220, 20, 60, 0.2);
          }
        }

        .chart {
          padding: 15px;
        }
      }
    }
  }

  // 底部数据面板样式
  .bottom-section {
    padding: 0 30px 30px;

    .data-panel {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      border-radius: 25px;
      border: 1px solid rgba(220, 38, 127, 0.1);
      height: 380px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 32px rgba(220, 38, 127, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 45px rgba(255, 107, 157, 0.2);
      }

      .panel-header {
          padding: 25px;
          border-bottom: 1px solid rgba(220, 38, 127, 0.1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: rgba(255, 255, 255, 0.5);

          h4 {
            margin: 0;
            color: #dc143c;
            font-size: 18px;
            font-weight: 600;
            text-shadow: 0 2px 10px rgba(220, 20, 60, 0.2);
          }

        .refresh-btn {
          cursor: pointer;
          color: #dc143c;
          font-size: 20px;
          transition: all 0.3s ease;
          padding: 8px;
          border-radius: 50%;
          background: rgba(255, 215, 0, 0.2);
          border: 1px solid rgba(220, 38, 127, 0.3);

          &:hover {
            color: #fff;
            background: linear-gradient(45deg, #dc143c, #ffd700);
            transform: rotate(180deg) scale(1.1);
            box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
          }
        }
      }

      .panel-content {
        flex: 1;
        padding: 25px;
        overflow-y: auto;

        // 排行榜样式
        .ranking-list {
          .ranking-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            transition: all 0.3s ease;

            &:last-child {
              border-bottom: none;
            }

            &:hover {
              background: rgba(255, 255, 255, 0.05);
              border-radius: 15px;
              padding-left: 10px;
              padding-right: 10px;
            }

            .rank-number {
              width: 35px;
              height: 35px;
              border-radius: 50%;
              background: rgba(255, 255, 255, 0.2);
              color: rgba(255, 255, 255, 0.8);
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 700;
              margin-right: 18px;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
              font-size: 14px;
            }

            &.rank-1 .rank-number {
              background: linear-gradient(45deg, #FFD700, #FFA500);
              color: #fff;
              box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
            }

            &.rank-2 .rank-number {
              background: linear-gradient(45deg, #C0C0C0, #A9A9A9);
              color: #fff;
              box-shadow: 0 6px 20px rgba(192, 192, 192, 0.4);
            }

            &.rank-3 .rank-number {
              background: linear-gradient(45deg, #CD7F32, #B8860B);
              color: #fff;
              box-shadow: 0 6px 20px rgba(205, 127, 50, 0.4);
            }

            .game-info {
              flex: 1;

              .name {
                font-size: 17px;
                color: #333;
                font-weight: 600;
                margin-bottom: 8px;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              }

              .stats {
                font-size: 13px;
                color: rgba(51, 51, 51, 0.7);

                .play-times {
                  margin-right: 18px;
                  color: #00d4aa;
                  font-weight: 500;
                }

                .popularity {
                  color: #f8b500;
                  font-weight: 500;
                }
              }
            }

            .rank-badge {
              font-size: 22px;
              color: #FFD700;
              text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
            }
          }
        }

        // 活动列表样式
        .activity-list {
          .activity-item {
            display: flex;
            align-items: flex-start;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;

            &:last-child {
              border-bottom: none;
            }

            &:hover {
              background: rgba(255, 255, 255, 0.05);
              border-radius: 15px;
              padding-left: 10px;
              padding-right: 10px;
            }

            .activity-icon {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 15px;
              font-size: 16px;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
              font-weight: 600;
            }

            &.activity-type-1 .activity-icon {
              background: linear-gradient(45deg, #dc143c, #b8860b);
              color: #fff;
            }

            &.activity-type-2 .activity-icon {
              background: linear-gradient(45deg, #ffd700, #daa520);
              color: #333;
            }

            &.activity-type-3 .activity-icon {
              background: linear-gradient(45deg, #8b0000, #dc143c);
              color: #fff;
            }

            .activity-content {
              flex: 1;

              .activity-text {
                font-size: 15px;
                color: #333;
                margin-bottom: 8px;
                line-height: 1.5;
                font-weight: 500;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              }

              .activity-time {
                font-size: 13px;
                color: rgba(51, 51, 51, 0.7);
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }

  // 滚动数据样式
  .scroll-data {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    z-index: 1000;
    border-top: 1px solid rgba(220, 38, 127, 0.1);
    box-shadow: 0 -4px 20px rgba(220, 38, 127, 0.1);

    .scroll-content {
      white-space: nowrap;
      animation: scrollText 25s linear infinite;

      .scroll-item {
        display: inline-block;
        margin-right: 60px;
        color: #dc143c;
        font-size: 18px;
        font-weight: 500;
        text-shadow: 0 2px 8px rgba(220, 20, 60, 0.2);
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 25px;
        border: 1px solid rgba(220, 38, 127, 0.2);
        animation: gradientShift 4s ease-in-out infinite, float 3s ease-in-out infinite, pulse 2s ease-in-out infinite;
      }
    }
  }

  // 动画效果
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes scrollText {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 0.8;
    }
    50% {
      opacity: 1;
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .dashboard-header {
      padding: 20px;

      .header-content {
        .title-section .main-title {
          font-size: 28px;
        }

        .time-section {
          .current-time {
            font-size: 22px;
          }
        }
      }
    }

    .metrics-section {
      padding: 0 20px 20px;

      .metric-card {
        padding: 20px;

        .metric-icon {
          font-size: 36px;
        }

        .metric-content .metric-value {
          font-size: 24px;
        }
      }
    }

    .charts-section {
      padding: 0 20px 20px;
    }

    .bottom-section {
      padding: 0 20px 20px;
    }
  }

  @media (max-width: 768px) {
    .dashboard-header {
      padding: 15px;

      .header-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;

        .title-section .main-title {
          font-size: 24px;
        }

        .time-section {
          .current-time {
            font-size: 20px;
          }
        }
      }
    }

    .metrics-section {
      padding: 0 15px 15px;

      .metric-card {
        padding: 15px;

        .metric-icon {
          font-size: 32px;
          margin-right: 15px;
        }

        .metric-content {
          .metric-value {
            font-size: 20px;
          }

          .metric-label {
            font-size: 14px;
          }
        }
      }
    }

    .charts-section {
      padding: 0 15px 15px;

      .chart-container .chart-header {
        padding: 15px;
        flex-direction: column;
        gap: 15px;

        .chart-tabs {
          justify-content: center;
          flex-wrap: wrap;
        }
      }
    }

    .bottom-section {
      padding: 0 15px 15px;

      .data-panel {
        height: 300px;

        .panel-header {
          padding: 15px;
        }

        .panel-content {
          padding: 15px;
        }
      }
    }

    .scroll-data {
      padding: 15px 0;

      .scroll-content .scroll-item {
        font-size: 16px;
        margin-right: 40px;
      }
    }
  }

  // 背景装饰样式
  .header-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .floating-hearts {
    position: absolute;
    width: 100%;
    height: 100%;

    .heart {
      position: absolute;
      width: 20px;
      height: 20px;
      background: linear-gradient(45deg, #dc143c, #ffd700);
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      animation: float 6s ease-in-out infinite;
      opacity: 0.3;

      &:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
      &:nth-child(2) { top: 20%; left: 80%; animation-delay: 1s; }
      &:nth-child(3) { top: 60%; left: 20%; animation-delay: 2s; }
      &:nth-child(4) { top: 80%; left: 70%; animation-delay: 3s; }
      &:nth-child(5) { top: 30%; left: 50%; animation-delay: 4s; }
      &:nth-child(6) { top: 70%; left: 90%; animation-delay: 5s; }
      &:nth-child(7) { top: 40%; left: 15%; animation-delay: 1.5s; }
      &:nth-child(8) { top: 90%; left: 40%; animation-delay: 2.5s; }
    }
  }

  .gradient-orbs {
    position: absolute;
    width: 100%;
    height: 100%;

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      animation: pulse 4s ease-in-out infinite;

      &.orb-1 {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255, 107, 157, 0.3) 0%, transparent 70%);
        top: -50px;
        right: -50px;
        animation-delay: 0s;
      }

      &.orb-2 {
        width: 150px;
        height: 150px;
        background: radial-gradient(circle, rgba(255, 143, 171, 0.2) 0%, transparent 70%);
        bottom: -30px;
        left: -30px;
        animation-delay: 2s;
      }
    }
  }
}
</style>
